<template>
  <view class="page">
    <TopTip color="#FF7F7F" bcolor="#F8E8E7">
      剩余支付时间 {{ minutes }}:{{ seconds }}，过期将自动取消
    </TopTip>
    
    <view class="tcard">
      <view class="top">
        <view class="">
          支付金额（元）
        </view>
        <view class="money">
          {{params.zje}}
        </view>
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="label">
            业务类型
          </view>
          <view class="value">
            预约挂号费用
          </view>
        </view>
      </view>
    </view>
    
    <view class="txttip">
      选择支付方式
    </view>
    
    <view class="pay-type-box">
      <view class="pay-type flexR">
        <view class="left">
          <img class="logo" src="../../static/images/bg-header/weixin_logo.png" alt="">
          <text>微信支付</text>
        </view>
        <view class="right">
          <radio :checked="check" @click="check = true"/>
        </view>
      </view>
      <view class="pay-type flexR">
        <view class="left">
          <img class="logo" src="../../static/images/bg-header/yb_logo.png" alt="">
          <text>医保支付</text>
        </view>
        <view class="right">
          <radio :disabled="true" :checked="!check" @click=""/>
        </view>
      </view>
    </view>
    
    <TopTip :paddingPage="false">
      <view class="tip-title">
        温馨提示
      </view>
      <view class="">
        1、如需门诊医疗收费收据（发票），请前往收费处打印。
        2、交易扣费成功，系统交费失败时，您可以重新发起支付或选择其他途径继续交费。支付失败款项将在5个工作日内，原路返还到您的账号中，请您放心使用。
      </view>
    </TopTip>
    
    <view class="btn" @click="toPay">
      立即支付
    </view>
  </view>
</template>

<script>
  import { cancelAppointment, poPayRegister } from '@/api/register.js'
  import { mapGetters, mapActions } from 'vuex'
  import {pay, registerback} from '@/api/physical.js'
  
  export default {
    data() {
      return {
        routeParams: {},
        params: {},
        // 倒计时
        minutes: 15,
        seconds: 0,
        countdownInterval: null,
        check: true
      }
    },
    computed:{
    	...mapGetters(['userInfo'])
    },
    onLoad(opt) {
      this.routeParams = JSON.parse(opt.routeParams)
      this.params = JSON.parse(opt.params)
      
      this.startCountdown()
    },
    onUnload() {
      clearInterval(this.countdownInterval);
    },
    methods: {
      ...mapActions(['createPay']),
      startCountdown() {
        this.showCountdown = true;
        this.countdownInterval = setInterval(() => {
          if (this.minutes === 0 && this.seconds === 0) {
            clearInterval(this.countdownInterval);
            this.showCountdown = false;
            // 可以在这里添加倒计时结束后的操作
          } else {
            if (this.seconds > 0) {
              this.seconds--;
            } else {
              this.minutes--;
              this.seconds = 59;
            }
          }
        }, 1000);
      },
      toPay() {
      	let params = {
      		money:this.params.ysje,
      		patId:this.userInfo.patId,
      		sjh:this.params.sjh,
      		tradeType:1,
      	}
      	this.load = true;
      	this.createPay(params).then((data)=>{
      		this.load = false;
      		let paymentData;
      		paymentData = {
            body: data.hisOrderId,
            orderId: data.hisOrderId,
            // payMoney: this.params.ysje,
            payMoney: '0.01',
            spbCreIp: '127.0.0.1',
            openId: this.userInfo.userId,
            account: this.userInfo.userId
      		}
          
          pay(paymentData).then(res => {
            this.onBridgeReady(res, data.hisOrderId)
          })
      	}).catch(e => {
      		this.load = false
      	})
      },
      onBridgeReady(res, hisOrderId) {
          WeixinJSBridge.invoke('getBrandWCPayRequest', {
              "appId": res.appId,     //公众号ID，由商户传入     
              "timeStamp": res.timeStamp,     //时间戳，自1970年以来的秒数     
              "nonceStr": res.nonceStr,      //随机串     
              "package": res.package,
              // "signType": "RSA",     //微信签名方式：     
              "signType": "MD5",     //微信签名方式：
              "paySign": res.paySign //微信签名 
          },
          function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  // alert('跳转成功页面')
                  // this.$u.toast('支付成功')
                  // uni.redirectTo({
                  // 	url:'/pages/Index'
                  // })
                  
                  uni.showLoading({})
                  registerback({dealCode: hisOrderId}).then(res => {
                    uni.hideLoading()
                    uni.navigateTo({
                      url: `./registerSuccess/registerSuccess?routeParams=${JSON.stringify(this.routeParams)}`
                    })
                  })
              }
          });
      },
      
    }
  }
</script>

<style lang="scss" scoped>
.money {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 52upx;
  color: #FFAA32;
  line-height: 44upx;
  margin: 40upx auto 60upx;
}
.top {
  text-align: center;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
  padding-top: 24upx;
}
.tform-item {
  border: none;
}

.txttip {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28upx;
  color: #666;
  line-height: 48upx;
  margin-bottom: 24upx;
}

.pay-type-box {
  background: #FFFFFF;
  border-radius: 8upx;
  border: 1px solid #E6E6E6;
  margin-bottom: 24upx;
  .pay-type {
    justify-content: space-between;
    align-items: center;
    padding: 32upx;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .logo {
        width: 48upx;
        margin-right: 34upx;
      }
    }
    &:nth-child(1) {
      border-bottom: 1px solid #E6E6E6;
      .logo {
        width: 48upx;
        margin-right: 34upx;
      }
    }
    &:nth-child(2) {
      .logo {
        width: 64upx;
        margin-right: 18upx;
      }
    }
  }
}

.tip-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 28upx;
  color: #F77E0D;
  text-align: center;
}

.btn {
  margin: 80upx auto;
  width: 620upx;
  height: 80upx;
  background: $theme-color;
  border-radius: 80upx;
  text-align: center;
  line-height: 80upx;
  color: #FFF;
}
.tip-title {
  
}
</style>
